<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>
<script src="bootstrap.min.css"></script>
<script src="bootstrap.min.js"></script>
<script src="jquery.slim.min.js"></script>
<script src="popper.min.js"></script>
<style>
/* .j1{
margin-left: 300px;
position: absolute;
top: 690px;
color: aliceblue;
font-family: cursive;
font-size: 40px;
}
.j1:hover{
color: chartreuse;
} */
@keyframes bnn{
0%{
background-color:red;
}
100%{
background-color: blue;
}
}
#bn{
/* position: absolute; */
/* border: 1px solid; */
/* border-radius: 20px; */
/* margin-top: 10px; */
/* margin-left: 960px; */
/* height: 60px; */
/* width: 60px; */
/* background-color: aqua; */
color: white;
animation-name: bnn;
animation-duration: 1s;
animation-delay: 1s;
animation-iteration-count: infinite;
}
</style>
</head>
<body>
<!--navbar-->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#"><b>Precious Memories </b></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="destination.html">About Us</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="Destination(rafi).html" role="button" data-toggle="dropdown" aria-expanded="false">
Destination
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="delhi.html">Delhi</a>
<a class="dropdown-item" href="jamshedpur.html">Jamshedpur</a>
<a class="dropdown-item" href="jaipur.html">Jaipur</a>
<a class="dropdown-item" href="">Goa</a>
<a class="dropdown-item" href="manali.html">Manali</a>
<a class="dropdown-item" href="pune.html">Pune</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="destination.html">others</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link " href="Aboutus.html"> Feedback</a>
</li>
<li class="nav-item">
<a class="nav-link " href="contact.html"> Contact Us</a>
</li>
<li class="nav-item">
<a class="nav-link " href="#"> Log in</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<h1 style="font-family: cursive; font-size: 50px;"><center><div class="p1"></div> <div class="p2"></div><u>Venues Of Manali</u></center></h1>
<div class="card-group mt-5">
<div class="card" style="margin-right: 20px; margin-left: 20px; border: 2px solid; border-radius:30px;">
<img src="manali.jpg" class="card-img-top" alt="" style="border-radius: 30px; height: 50%;">
<div class="card-body">
<h5 class="card-title" style=" font-size: 40px;">Lion Palace</h5>
<p class="card-text"> <b>5 Star luxurious Wedding </b> <br> ⭐4.0(1479)<br>📌location: Manali<br> 🍽️From Ruppes 2000 🧑🤝🧑50 to 2000 </p>
<a href="contact.html" class="btn" id="bn">Book Now🖐🏻</a>
</div>
<div class="card-footer">
<small class="text-body-secondary">Last updated 3 mins ago</small>
</div>
</div>
<div class="card" style="margin-right: 20px; margin-left: 20px; border: 2px solid; border-radius: 30px;">
<img src="manali2.jpg" class="card-img-top" alt="..." style="border-radius: 30px; height: 50%;">
<div class="card-body">
<h5 class="card-title" style="font-size: 40px;"> Mahal Palace</h5>
<p class="card-text"><b>5 Star luxurious Wedding </b> <br> ⭐5.0(17879)<br>📌location: Manali<br> 🍽️From Ruppes 1,800 🧑🤝🧑50 to 2100</p>
<a href="" class="btn" id="bn">Book Now🖐🏻</a>
</div>
<div class="card-footer">
<small class="text-body-secondary">Last updated 3 mins ago</small>
</div>
</div>
<div class="card" style="margin-right: 20px; margin-left: 20px; border: 2px solid; border-radius: 30px;">
<img src="manali3.jpg" class="card-img-top" alt="..." style="border-radius: 30px; height: 50%;">
<div class="card-body">
<h5 class="card-title" style=" font-size: 40px;">DIngo Palace</h5>
<p class="card-text"><b>5 Star luxurious Wedding </b> <br> ⭐5.0(14869)<br>📌location: Manali<br> 🍽️From Ruppes 2,800 🧑🤝🧑100 to 2500</p>
<a href="" class="btn" id="bn">Book Now🖐🏻</a>
</div>
<div class="card-footer">
<small class="text-body-secondary">Last updated 3 mins ago</small>
</div>
</div>
</div>
<footer class="text-center text-lg-start bg-body-tertiary text-light bg-dark mt-5">
<!-- Section: Social media --> <section class="d-flex justify-content-center justify-content-lg-between p-4 border-bottom">
<!-- Right -->
<div>
<a href="" class="me-4 text-reset">
<i class="fab fa-facebook-f"></i>
</a>
<a href="" class="me-4 text-reset">
<i class="fab fa-twitter"></i>
</a>
<a href="" class="me-4 text-reset">
<i class="fab fa-google"></i>
</a>
<a href="" class="me-4 text-reset">
<i class="fab fa-instagram"></i>
</a>
<a href="" class="me-4 text-reset">
<i class="fab fa-linkedin"></i>
</a>
<a href="" class="me-4 text-reset">
<i class="fab fa-github"></i>
</a>
</div>
<!-- Right -->
</section>
<!-- Section: Social media -->
<!-- Section: Links -->
<section class="">
<div class="container text-center text-md-start mt-5">
<!-- Grid row -->
<div class="row mt-3">
<!-- Grid column -->
<div class="col-md-3 col-lg-4 col-xl-3 mx-auto mb-4">
<!-- Content -->
<h6 class="text-uppercase fw-bold mb-4">
<i class="fas fa-gem me-3"></i>Company name
</h6>
<p>
Here you can use rows and columns to organize your footer content. Lorem ipsum
dolor sit amet, consectetur adipisicing elit.
</p>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-md-2 col-lg-2 col-xl-2 mx-auto mb-4">
<!-- Links -->
<h6 class="text-uppercase fw-bold mb-4">
Products
</h6>
<p>
<a href="#!" class="text-reset">Angular</a>
</p>
<p>
<a href="#!" class="text-reset">React</a>
</p>
<p>
<a href="#!" class="text-reset">Vue</a>
</p>
<p>
<a href="#!" class="text-reset">Laravel</a>
</p>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-md-3 col-lg-2 col-xl-2 mx-auto mb-4">
<!-- Links -->
<h6 class="text-uppercase fw-bold mb-4">
Useful links
</h6>
<p>
<a href="#!" class="text-reset">Pricing</a>
</p>
<p>
<a href="#!" class="text-reset">Settings</a>
</p>
<p>
<a href="#!" class="text-reset">Orders</a>
</p>
<p>
<a href="#!" class="text-reset">Help</a>
</p>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-md-4 col-lg-3 col-xl-3 mx-auto mb-md-0 mb-4">
<!-- Links -->
<h6 class="text-uppercase fw-bold mb-4">Contact</h6>
<p><i class="fas fa-home me-3"></i> New York, NY 10012, US</p>
<p>
<i class="fas fa-envelope me-3"></i>
info@example.com
</p>
<p><i class="fas fa-phone me-3"></i> + 01 234 567 88</p>
<p><i class="fas fa-print me-3"></i> + 01 234 567 89</p>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</div>
</section>
<!-- Copyright -->
<div class="text-center p-4" style="background-color: rgba(0, 0, 0, 0.05);">
© 2021 Copyright:
<a class="text-reset fw-bold" href="https://mdbootstrap.com/">MDBootstrap.com</a>
</div>
<!-- Copyright -->
</footer>
<!-- Footer -->
</html>